<!--
 * @Descripttion:
 * @version:
 * @Author: tanghao1
 * @Date: 2021-01-21 15:39:19
 * @LastEditors: tanghao1
 * @LastEditTime: 2021-03-16 14:52:47
-->
<template>
  <div>
    <div v-show="!showEditModel && !showEdit">
      <table-box
        ref="refPositionTable"
        :table-config="tableConfig"
        :other-filters="otherFilters"
        :selected-arry.sync="multipleSelection"
        :off-set="-10"
        @data-change="dataChange"
        @selection-change="handleSelectionChange"
        @btnOperate="btnOperate"
      />
    </div>
    <!-- 编辑基础信息  begin-->
    <div v-if="showEdit">
      <edit-form ref="formEdit" :visible.sync="showEdit" :detail-data="detailData" @refreshTable="refreshTable" @refreshTabletomodel="refreshTabletomodel" />
    </div>
    <div v-if="showEditModel">
      <edit-form-model ref="formEditModel" :visible.sync="showEditModel" :detail-data-model="detailDataModel" @refreshTableModel="refreshTableModel" />
    </div>
  </div>
</template>
<script>
import EditForm from './EditForm'
import EditFormModel from './EditFormModel'
import { saveScreen, enableScreen, disableScreen, deleteScreen } from '@/api/shopauxPlat/screenTemplate' // 新增编辑-保存,启用,停用,删除
export default {
  components: { EditForm, EditFormModel },
  data() {
    return {
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/filterTemplate/page`,
        pageSize: 20,
        sort: '',
        order: 'desc',
        setting: [
          {
            prop: 'name',
            label: '模板名称',
            minWidth: 130
          },
          {
            prop: 'dataComeFrom',
            label: '筛选数据来源',
            minWidth: 130
          },
          {
            prop: 'state',
            label: '状态',
            minWidth: 130,
            formatData: function({ state }) { return state === '1' ? '启用' : '停用' }
          },
          {
            prop: 'remark',
            label: '备注',
            minWidth: 130
          },
          {
            prop: 'lastUpdateBy',
            label: '修改人',
            minWidth: 130
          },
          {
            prop: 'lastUpdateTime',
            label: '最后修改时间',
            minWidth: 130
          }],
        btnList: !this.isProduction ? [
          {
            buttonName: '启用',
            optCode: 'enable',
            outerFlag: true
          }, {
            buttonName: '停用',
            optCode: 'disable',
            outerFlag: true
          },
          {
            buttonName: '新增',
            optCode: 'add',
            outerFlag: true
          }, {
            buttonName: '编辑基础信息',
            optCode: 'editbasic',
            outerFlag: true
          }, {
            buttonName: '编辑模板',
            optCode: 'editmodel',
            outerFlag: true
          },
          {
            buttonName: '删除',
            optCode: 'del',
            outerFlag: true
          }
        ] : null
      },
      showEditModel: false,
      showEdit: false,
      detailData: [],
      detailDataModel: [],
      formData: {
        productGroup: '',
        saleOrg: '',
        salechannel: ''
      }
    }
  },
  created() {

  },
  methods: {
    // 清空搜索条件
    clearSearch(data) {
    },
    // 获取搜索条件
    handleSearch() {
      this.$nextTick(() => {
        if (this.$refs.refPositionTable) {
          this.$refs.refPositionTable.initTableData()
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    btnOperate(code) {
      switch (code) {
        case 'add':
          this.handleEdit('add')
          break
        case 'editbasic':
          if (!this.singleJudge(this.multipleSelection, '编辑', true)) {
            return
          }
          this.handleEdit('edit', this.multipleSelection[0])
          break
        case 'editmodel':
          if (!this.singleJudge(this.multipleSelection, '编辑模板', true)) {
            return
          }
          this.handleEditModel(this.multipleSelection[0])
          break
        case 'enable':
          this.enabletail(this.multipleSelection)
          break
        case 'disable':
          this.disabletail(this.multipleSelection)
          break
        case 'del':
          this.edeltail(this.multipleSelection)
          break
      }
    },
    // 新增/编辑
    handleEdit(type, data) {
      if (type === 'edit') { // 编辑
        this.detailData = data
      } else { // 新增
        this.detailData = ''
      }
      this.showEdit = true
    },
    // 编辑模板信息
    handleEditModel(data) {
      this.detailDataModel = data
      this.showEditModel = true
    },
    closeDialog() {
      this.formData = {}
      this.showAdd = false
    },
    // 启用
    enabletail(data) {
      if (this.multipleSelection.length < 1) {
        this.$message.warning(`请选择【启用】项`)
        return false
      }
      if (!this.multipleSelection.every(list => list.state === '0')) {
        this.$message.warning(`仅已停用的数据才可启用，请检查`)
        return false
      }
      const ids = []
      data.forEach(item => ids.push(item.id))
      this.$confirm('确认启用?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        enableScreen(ids).then(res => {
          if (res.success === 1) {
            this.$message.success('启用成功')
            this.handleSearch()
          }
        })
      })
    },
    // 停用
    disabletail(data) {
      if (this.multipleSelection.length < 1) {
        this.$message.warning(`请选择【停用】项`)
        return false
      }
      if (!this.multipleSelection.every(list => list.state === '1')) {
        this.$message.warning(`仅启用的数据允许停用，请检查`)
        return false
      }
      const ids = []
      data.forEach(item => ids.push(item.id))
      this.$confirm('确认停用?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        disableScreen(ids).then(res => {
          if (res.success === 1) {
            this.$message.success('停用成功')
            this.handleSearch()
          }
        })
      })
    },
    // 删除
    edeltail(data) {
      if (this.multipleSelection.length < 1) {
        this.$message.warning(`请选择【删除】项`)
        return false
      }
      if (!this.multipleSelection.every(list => list.state === '0')) {
        this.$message.warning(`只能删除停用状态的数据，请检查`)
        return false
      }
      const ids = []
      data.forEach(item => ids.push(item.id))
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteScreen(ids).then(res => {
          if (res.success === 1) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.handleSearch()
          }
        })
      })
    },
    refreshTable() {
      this.showEdit = false
      this.handleSearch()
    },
    refreshTabletomodel(data) {
      this.detailDataModel = data
      this.showEdit = false
      // this.handleSearch()
      this.showEditModel = true
    }
  }
}
</script>
<style lang="scss" scoped>
.bord_butm{border-bottom: 1px solid #f0f0f0; margin-bottom: 10px;}
</style>

